<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p>我的订单</p>
		</header>

		<!-- 订单列表部分 -->
		<h3>未支付订单信息：</h3>
		<ul class="order">
			<li v-for="(item,index) in orders_unpay">
				<div class="order-info">
					<p>
						{{dic[item.businessId]}}
						<i class="fa fa-caret-down"></i>
					</p>
					<div class="order-info-right">
						<p>&#165;{{item.orderTotal}}</p>
						<div class="order-info-right-icon" @click="toPayment(item.orderId,dic[item.businessId])">去支付</div>
					</div>
				</div>
				<ul class="order-detailet">
					<li v-for="detail in item.orderDetailets">
						<p>{{food_dic[detail.foodId]}} X {{detail.quantity}}</p>
						<p>&#165;{{total_dic[detail.foodId]}}</p>
					</li>
					<li>
						<p>配送费</p>
						<p>&#165;{{de_dic[item.businessId]}}</p>
					</li>
				</ul>

			</li>

		</ul>

		<h3>已支付订单信息：</h3>
		<ul class="order">
			<li v-for="item in orders_payed">
				<div class="order-info">
					<p>
						{{dic[item.businessId]}}
						<i class="fa fa-caret-down"></i>
					</p>
					<div class="order-info-right">
						<p>&#165;{{item.orderTotal}}</p>
					</div>
				</div>
				<ul class="order-detailet">
					<li v-for="detail in item.orderDetailets">
						<p>{{food_dic[detail.foodId]}} X {{detail.quantity}}</p>
						<p>&#165;{{total_dic[detail.foodId]}}</p>
					</li>

					<li>
						<p>配送费</p>
						<p>&#165;{{de_dic[item.businessId]}}</p>
					</li>
				</ul>
			</li>

		</ul>
		<Footer></Footer>
	</div>

</template>
<script>
	import Footer from '../components/Footer.vue';

	export default {
		name: 'OrderList',
		data() {
			return {
				user: {},
				data: [],
				orders_unpay: [],
				orders_payed: [],
				dic:{},
				food_dic:{},
				price_dic:{},
				total_dic:{},
				de_dic:{}
			}

		},
		created() {
			this.user = this.$getSessionStorage('user');
			//this.$set(this.dic,'0', 'A');

			//订单初始化
			this.$axios.post('OrderController/listOrderByUserId', this.$qs.stringify({
				userId: this.user.userId
			})).then(response => {
				let temp = response.data;

				for (let i of temp) {
					//商家名字
					this.$axios.post('BusinessController/getBusinessById', this.$qs.stringify({
						businessId:i.businessId
					})).then(response => {
						let ans=response.data;
						this.$set(this.dic,i.businessId,ans.businessName);
						this.$set(this.de_dic,i.businessId,ans.deliveryPrice);
					}).catch(error => {
						console.error(error);
					});
					//Food对应
					for(let j of i.orderDetailets){
						this.$axios.post('FoodController/getFoodByFoodId', this.$qs.stringify({
							foodId:j.foodId
						})).then(response => {
							let re=response.data;
							this.$set(this.food_dic,j.foodId,re.foodName);
							this.$set(this.price_dic,j.foodId,re.foodPrice);
							this.$set(this.total_dic,j.foodId,j.quantity*re.foodPrice);
						}).catch(error => {
							console.error(error);
						});
					}
					if (i.orderState == 0) {

						this.orders_unpay.push(i);
					} else {
						this.orders_payed.push(i);
					}
				}
			}).catch(error => {
				console.error(error);
			});
			/*商家初始化
			this.$axios.post('BusinessController/getBusinessById', this.$qs.stringify({
				businessId:
			})).then(response => {
			}).catch(error => {
				console.error(error);
			});

			 */
		},
		components: {
			Footer
		},
		methods: {
			toPayment(temp1,temp2){
				this.$router.push({path:'/payment',query:{orderId:temp1,businessName:temp2}});
			}



		},

	}


</script>

<style scoped>

	/****************** 总容器 ******************/
	.wrapper{
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header{
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 历史订单列表部分 ******************/
	.wrapper h3{
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}
	.wrapper .order{
		width: 100%;
	}
	.wrapper .order li{
		width: 100%;
	}
	.wrapper .order li .order-info{
		box-sizing: border-box;
		padding: 2vw 4vw;
		font-size: 4vw;
		color: #666;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .order li .order-info .order-info-right{
		display: flex;
	}
	.wrapper .order li .order-info .order-info-right .order-info-right-icon{
		background-color: #f90;
		color: #fff;
		border-radius: 3px;
		margin-left: 2vw;
		user-select: none;
		cursor: pointer;
	}

	.wrapper .order li .order-detailet{
		width: 100%;
	}
	.wrapper .order li .order-detailet li{
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;
		color: #666;
		font-size: 3vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	/****************** 底部菜单部分 ******************/
	.wrapper .footer{
		width: 100%;
		height: 14vw;
		border-top: solid 1px #DDD;
		background-color: #fff;

		position: fixed;
		left: 0;
		bottom: 0;

		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.wrapper .footer li{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		color: #999;
		user-select: none;
		cursor: pointer;
	}
	.wrapper .footer li p{
		font-size: 2.8vw;
	}
	.wrapper .footer li i{
		font-size: 5vw;
	}


</style>